<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>待接单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <style>
        * { touch-action: none; }
        .mui-card .mui-control-content {
            padding: 10px;
        }

        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .mui-content .mui-content-item{
            width:100%;
            height:calc(100% - 116px);
        }
        .mui-content .mui-content-item .mui-control-content{
            width: 100%;
            height:100%;
        }
        .bottom_submit{
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
        }
        input[type=submit]#submit{
            width:100%;
            height:48px;
            line-height: 48px;
            background:#4F77AA ;
            border:none;
            padding: 0;
        }
        
        .mui-input-row label~textarea{
            border:1px solid #c8c7cc;
            width: 60%;
            margin-right: 5%;
        }
        .mui-select-content{
            width:100%;
            height:41px;
            background: #EFEFF4;
        }
        .mui-select{
            width:80%;
            float:left;
        }
        .mui-select select{
            width:100%;
            background: #EFEFF4;
            border-radius: 0;
        }
        .mui-select-content .add_button{
            width: 20%;
            float: right;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        .mui-select-content .add_button input{
            display: inline-block;
            width:100%;
            height:100%;
            background: #4f77aa;
            color:#ffffff;
        }
        .mui-control-content .add_detailed{
            width: 20%;
            float: right;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        .mui-control-content .add_detailed input{
            display: inline-block;
            width:100%;
            height:100%;
            background: #4f77aa;
            color:#ffffff;
        }
        .mui-ellipsis-title{
            color:#4f77aa;
        }
        .mui-popup-title{
            text-align: left;
        }
        .mui-ellipsis span{
            font-size: 24px;
            padding-left: 25px;
            color:#f8ac59;
        }
        .mui-table-view-cell p{
            padding:5px 0;
        }
        .clear{
            clear: both;
        }
        .mui-content-item .line_x{
            width: 100%;
            height: 8px;
            background: #EFEFF4;
        }
        .mui-input-group input, .mui-input-group textarea{
            border: 1px solid #dddddd;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">待接单</h1>
</header>
<div class="mui-content">
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
            <a class="mui-control-item mui-active" href="#item1">基础信息</a>
            <a class="mui-control-item" href="#item2">接单明细</a>
            <a class="mui-control-item" href="#item3">更换配件</a>
        </div>
    </div>
    <div class="mui-content-item">
        <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>设备编码：</label>
                            <input type="text" value="CTY-04-002" disabled>
                        </div>
                         <div class="" style="padding: 10px 15px;">
                            <label>报修描述：</label>
                            <textarea class="textarea" id="repairDesc1" rows="5" placeholder="报修描述"></textarea>
                        </div>
                        <div class="clear"></div>
                        <div class="line_x" style=""></div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                        <div class="mui-input-row">
                            <label>接单单号：</label>
                            <input type="text" value="BY-20190827001" disabled>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="item2" class="mui-control-content">
            <div id="scroll1" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title' style="width:75%;float:left;">接单人：杨洋</p>
                                <div class="add_detailed"><input type="button" value="添加" id="add_detailed"></div>
                                <div class="clear"></div>
                                <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>接单人：杨洋</p>
                                <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                            </div>
                        </li>

                    </ul>

                    <!--<form class="mui-input-group">-->
                    <!--<div class="mui-input-row append">-->
                    <!--<label>开始时间：</label>-->
                    <!--<input type="text" class="btn" data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' id="start_time" value="2019-08-27 00:00" >-->
                    <!--</div>-->
                    <!--<div class="mui-input-row">-->
                    <!--<label>结束时间：</label>-->
                    <!--<input type="text" class="btn1" data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' id="end_time" value="2019-08-27 00:00">-->
                    <!--</div>-->

                    <!--</form>-->
                    <!--<form>-->
                    <!--<div class="mui-input-row" style="height:auto;margin-top:10px;">-->
                    <!--<label>工作描述：</label>-->
                    <!--<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>-->
                    <!--</div>-->
                    <!--</form>-->
                    <!---->
                </div>
            </div>
        </div>
        <div id="item3" class="mui-control-content">
            <div id="scroll2" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="mui-select-content">
                        <div class="mui-select">
                            <select class="mui-h5 add_sparepart" style="margin:auto; color:#000;">
                                <option value="">--请选择备件仓库--</option>
                                <option value="1">成都仓库</option>
                                <option value="1">接单件库</option>
                            </select>
                        </div>
                        <div class="add_button"><input type="button" value="添加" id="add_sparepart"></div>
                    </div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media" onclick="sparepartNumber(0,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>CK-20190827001</p>
                                <p class='mui-ellipsis'>备件编码：0135</p>
                                <p class='mui-ellipsis'>规格型号：30*50*1</p>
                                <p class='mui-ellipsis'>使用数量：<span class="add_sum color-primary iconfont icon-tianjia1"></span><span class="use_sum">10</span><span class="reduce_sum color-primary iconfont icon-jianshao"></span></p>
                            </div>
                        </li>


                    </ul>


                </div>
            </div>
        </div>

    </div>

    <div class="bottom_submit">
        <input type="submit" value="提交" id="submit">
    </div>
</div>
<script src="../../js/jquery-1.11.3.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.picker.min.js"></script>
<script>
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll1').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll2').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll3').scroll({
            indicators: true //是否显示滚动条
        });

        $.init();
        var start_time = $('#start_time')[0];
        var end_time=$("#end_time")[0];
        var btns = $('.btn');
        var  btns1=$(".btn1");
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        end_time.value=rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        start_time.value=rs.text;
                        // end_time.value=rs.text;
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }

            }, false);
        });
        btns1.each(function(i, btn1) {
            btn1.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        end_time.value=rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        end_time.value=rs.text;
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }

            }, false);
        });
    })(mui);
    //添加备件
    $(document).on("click","input#add_sparepart",function(){
        var option=$("select.add_sparepart option:selected").html();
        if(option=='--请选择备件仓库--'){
            mui.alert('请选择备件仓库', '', function() {
                // info.innerText = '你刚关闭了警告框';
            });
        }else{
            // window.location.href="add_sparepart.html";
        }

    })

    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="unreceipt_list.html";
    })
    $(document).on("click","#submit",function(){
        window.location.href="unreceipt_list.html";
    })
</script>

</body>

</html>


